import React,{Component} from 'react';
import Adaptive from '../component/adaptive/Adaptive';
import {asyncSize} from 'pofod/window.size';
import Header from '../system/header/Header';
import {ReactHeight} from 'react-height';
import classNames from 'classnames';
import Waypoint from 'react-waypoint';
import Footer from '../component/footer/Footer';
import MobileFooter from '../component/footer-mobile/FooterMobile';
import './company.less';
import 'animate.css';
const prefix = 'huimei-company';
class Company extends Component{
    state={
        height:asyncSize().pageHeight,
        headerHeight:'',
        secName:'',
        thiName:''
    };
    handleWaypointEnter = (animate,index) =>{
        switch (index){
            case 2:
                this.setState({
                    secName:animate
                });
                break;
            case 3:
                this.setState({
                    thiName:animate
                });
                break;
            default:
                return null;

        }

    };
    handleWaypointLeave = (animate,index) =>{
        switch (index){
            case 2:
                this.setState({
                    secName:animate
                });
                break;
            case 3:
                this.setState({
                    thiName:animate
                });
                break;
            default:
                return null;
        }
    };
    componentDidMount(){
        window.addEventListener('resize',()=>{
            this.setState({
                height:asyncSize().pageHeight
            })
        });
    };
    componentWillUnmount(){
        window.removeEventListener('resize',()=>{
            this.setState({
                height:asyncSize().pageHeight
            })
        });
    };
    getHeight = (height) =>{
        this.setState({
            headerHeight:height
        });
    };
    render(){
        let {height,headerHeight,secName,thiName} = this.state;
        return(
            <div className={prefix}>
                <ReactHeight onHeightReady={this.getHeight}>
                    <Header refName="about" childNodes="about-a" choseImgDisplay="none"/>
                </ReactHeight>
                <div className={prefix+'-first-screen'} style={{minHeight:700-headerHeight+'px',height:height-headerHeight}}>
                    <div className={prefix+"-box"}>
                        <div className={classNames(prefix+'-content','animated','zoomIn')}>
                            <h1>惠每极致医疗</h1>
                            {/*<h3>打造“全球一体化医疗健康解决方案”</h3>*/}
                            <p>惠每医疗集团是由美国领先的非盈利性医疗集团之一——梅奥医疗集团（Mayo Clinic, 以下简称“梅奥”）与以专注于长期结构性价值投资而著称的投资公司——高瓴资本于2015年联合注资成立的医疗集团公司。</p>
                            <p className="sec-content">惠每极致医疗是惠每医疗集团旗下企业。致力于引入梅奥在临床、教育及科研的医疗资源，通过“梅奥+”战略，为国内医疗机构提供管理培训、对外交流、医护人员继续教育等医院管理增值服务，为银行、保险、企业等机构高净值人群量身打造“全球一体化医疗健康解决方案”。同时，在国家大力支持社会办医的背景下，为社会办医机构提供医院管理输出服务，致力成为中国最具专业度的医院管理机构。</p>
                        </div>
                    </div>
                </div>
                <div className={prefix+'-second-screen'} style={{height:height}}>
                    <div className={prefix+"-box"}>
                        <div className={prefix+'-content'}>
                            <div className={prefix+"-table-cell"}>
                                <Waypoint
                                    onEnter={(animate,index) => this.handleWaypointEnter('fadeInRight',2)}
                                    onLeave={(animate,index) => this.handleWaypointLeave('fadeInRight',2)}
                                />
                                <p className={classNames('animated',secName)}>惠每极致医疗负责运营梅奥认证的转诊机构——梅奥在华合资公司转诊办公室，为中国患者和健康人群提供远程会诊（eConsults）、一站式转诊（Referral）、定制体检计划（Comprehensive Health Program）等世界顶级的医疗健康服务。</p>
                                <p className={classNames('animated',secName)} style={{animationDelay:'0.2s'}}>目前，惠每极致医疗已建立海内外全流程无忧就医体系，为银行/保险/企业等机构量身打造“全球一体化医疗健康解决方案”，满足高净值客户对医疗健康的高品质、个性化服务需求。</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div className={prefix+'-third-screen'} style={{height:height}}>
                    <div className={prefix+"-box"}>
                        <div className={prefix+'-content'}>
                            <Waypoint
                                onEnter={(animate) => this.handleWaypointEnter('pulse',3)}
                                onLeave={(animate) => this.handleWaypointLeave('pulse',3)}
                            />
                            <h1 className={classNames('animated',thiName)}>服务理念</h1>
                            <h3 className={classNames('animated',thiName)} style={{animationDelay:'0.1s'}}>· 为患者和健康人群</h3>
                            <p className={classNames('animated',thiName)} style={{animationDelay:'0.2s'}}>借助丰富的医疗资源，提供国内和梅奥高质、便捷、个性化的医疗和健康服务。</p>
                            <h3 className={classNames('animated',thiName)} style={{animationDelay:'0.3s'}}>· 为医生和护士</h3>
                            <p className={classNames('animated',thiName)} style={{animationDelay:'0.4s'}}>通过Mayo Clinic的医学继续教育，提供提高专业水平的医学教育和进修机会。</p>
                            <h3 className={classNames('animated',thiName)} style={{animationDelay:'0.5s'}}>· 为医疗机构</h3>
                            <p className={classNames('animated',thiName)} style={{animationDelay:'0.6s'}}>借鉴Mayo Clinic的管理经验和临床路径IT系统，提供提升运营和管理水平的平台。</p>
                            <h3 className={classNames('animated',thiName)} style={{animationDelay:'0.7s'}}>· 为合作伙伴</h3>
                            <p className={classNames('animated',thiName)} style={{animationDelay:'0.8s'}}>借助惠每极致的产品服务，为合作伙伴在提高品牌影响力，增强客户忠诚度等方面提供增值服务。</p>
                        </div>
                    </div>
                </div>
                <Adaptive desktop={<Footer/>} phone={<MobileFooter/>} size={1200}/>
            </div>
        )
    }
};
export default Company;